<template>
    <Modal v-model="visible" :title="title" @on-ok="ok" :mask-closable="false">
        <Form ref="form" :model="form" :rules="formRules" :label-width="100" onsubmit="return false">
            <FormItem label="用户名" prop="username">
                <Input v-model="form.username"/>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="form.password"/>
            </FormItem>
            <FormItem label="手机号" prop="telephone">
                <Input v-model="form.telephone"/>
            </FormItem>
            <FormItem label="角色" prop="roleId">
                <Select v-model="form.roleId" clearable>
                    <Option v-for="item in roles" :value="item.id" :key="item.id">{{ item.roleName }}</Option>
                </Select>
            </FormItem>

            <FormItem label="项目名称">
                <Select v-model="form.projectId" clearable>
                    <Option v-for="item in projects" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
            </FormItem>

        </Form>

        <div slot="footer">
            <Button type="text" size="large" @click.native="cancel">取消</Button>
            <Button type="primary" size="large" :loading="loading" @click.native="ok">确定</Button>
        </div>
    </Modal>
</template>

<script>
    import api from '../../api';

    export default {
        props: ['getData'],
        data () {
            return {
                visible: false,
                loading: false,
                title: '',
                form: {},
                projects: [],
                formRules: {
                    username: [
                        {required: true, message: '用户名不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ],
                    roleId: [
                        {required: true, type: 'number', message: '角色不能为空', trigger: 'change'}
                    ]
                },
                roles: [],
                packageGroups: []
            };
        },
        methods: {
            ok () {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        api.systemUserInsert(this.form).then(data => {
                            this.loading = false;

                            if (data.code === 0) {
                                this.getData();
                                this.visible = false;
                            }
                        });
                    }
                });
            },
            open (title) {
                this.$refs.form.resetFields();
                this.visible = true;
                this.title = title;
                this.roleIndexNoPage;
                this.projectIndexNoPage;
            },
            cancel () {
                this.visible = false;
            }
        },
        computed: {
            roleIndexNoPage () {
                api.roleIndexNoPage().then(data => {
                    if (data.code === 0) {
                        this.roles = data.data;
                    }
                });
            },
            projectIndexNoPage () {
                api.projectList().then(data => {
                    if (data.code === 0) {
                        this.projects = data.data;
                    }
                });
            }
        }
    };
</script>
